<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-07-24 10:01:26
 * @FilePath: /amap-web-vr/src/components/vr-detail-dialog/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div class="vc-web-url-dialog zf-dialog">
          <div class="zf-dialog-container" >
              <div class="zf-dialog-container-header">
                   <slot name="header">
                        <div class="title">{{name}}</div>
                   </slot>
                   <img v-if="showClose" src="@/assets/images/ic_fill_close.png" alt="" srcset="" @click="emits('tap')">
              </div>
              <div class="zf-dialog-container-content">
                  <slot>
                    <iframe :src="url" frameborder="0"></iframe>
                  </slot>
              </div>
          </div>
    </div>
  </template>
  
  <script setup lang="ts">
  const emits = defineEmits(['tap'])
  defineProps({
      name: {
          type: String,
          default: ""
      },
      url: {
          type: String,
          default: ""
      },
      showClose:{
        type: Boolean,
        default: true
      }
  })
  
  </script>
  
  <style scoped lang="scss">
  .zf-dialog{
      width: 100vw;
      height: 100vh;
      background-color: rgba($color: #000000, $alpha: 0.1);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      &-container{
          width: 80%;
          height: 80%;
          background-color: #fff;
          padding: 10px;
          border-radius: 10px;
          box-sizing: border-box;
          &-header{
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              height: 40px;
              .title{
                  font-size: 16px;
                  font-weight: bold;
                  color: #333;
                  margin-right: 10px;
              }
              img{
                  width: 24px;
                  height: 24px;
              }
          }
          &-content{
              width: 100%;
              height: calc(100% - 40px);
              box-sizing: border-box;
              iframe{
                  width: 100%;
                  height: 100%;
                  border: none;
              }
          }
      }
  }
  </style>